<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 顶部工具栏 -->
      <PageTools>
        <span>本月: 社保在缴 公积金在缴</span>
        <template #right>
          <el-button type="primary" size="small" @click="handleExport">导出</el-button>
          <!-- <el-button v-if="$isOk('POINT-USER-ADD1')" type="primary" size="small" @click="handleImport">导入</el-button> -->
          <el-button type="primary" size="small" @click="handleImport">导入</el-button>
          <el-button type="primary" size="small">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 员工列表 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <!-- 添加员工头像 -->
          <el-table-column label="头像" sortable="">
            <template v-slot="{row}">
              <!-- 如果赋值给src的值是null，那么不会触发请求，那么也不会触发onerror事件 -->
              <img v-imgerror :src="row.staffPhoto" style="width: 50px;height:50px;border-radius: 25px;" alt="" @click="showCodeBox(row.staffPhoto)">
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <!-- formatter可以对该列的数据进行处理形成新的数据 -->
          <el-table-column label="聘用形式" :formatter="formatType" prop="formOfEmployment" sortable="" />
          <!-- <el-table-column label="聘用形式" prop="formOfEmployment" sortable="">
            <template v-slot="{row}">
              <div>{{ row.formOfEmployment | formatType }}</div>
              <div>{{ formatType(row.formOfEmployment) }}</div>
            </template>
          </el-table-column> -->
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template v-slot="{row}">
              <el-switch :inactive-value="0" :active-value="1" :value="row.enableState" active-color="green" inactive-color="lightgray" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push('/employees/detail/' + row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="handleRole(row.id)">角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination :current-page="queryData.page" :page-size="queryData.size" :total="total" layout="prev, pager, next" @current-change="changePage" />
        </div>
      </el-card>
    </div>
    <!-- 二维码弹窗 -->
    <el-dialog title="二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
      <el-row type="flex" justify="center">
        <!-- 绘制二维码的画布 -->
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <!-- 分配角色弹窗 -->
    <AssignRole :user-id="userId" :show-role-dialog.sync="showRoleDialog" />
  </div>
</template>

<script>
import { reqGetEmployeeList } from '@/api/employees.js'
import Types from '@/api/constant/employees.js'
import moment from 'moment'
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'

export default {
  name: 'Employees',
  components: { AssignRole },
  // 局部过滤器
  filters: {
    // 过滤器名称
    formatType (value) {
      // 形参表示被过滤器处理的原始数据
      const info = Types.hireType.find(item => item.id === value)
      return info ? info.value : ''
    }
  },
  data () {
    return {
      // 当前分配角色的用户id
      userId: '',
      // 控制分配角色弹窗
      showRoleDialog: false,
      // 请求参数
      queryData: {
        page: 1,
        size: 10
      },
      // 员工列表
      list: [],
      // 列表总数
      total: 0,
      // 二维码弹窗标志位
      showCodeDialog: false
    }
  },
  created () {
    this.loadEmployeeList()
  },
  methods: {
    // 导入跳转
    handleImport () {
      const isOk = this.$isOk('POINT-USER-ADD1')
      if (isOk) {
        this.$router.push('/import')
      }
    },
    // 给用户分配角色
    handleRole (id) {
      this.userId = id
      this.showRoleDialog = true
    },
    // 显示二维码弹窗
    showCodeBox (url) {
      if (!url) return
      // 数据变成true之后，此时弹窗是否已经显示了？没有
      // 必须保证弹窗打开后，才去获取DOM元素
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 保证前面的数据更新的页面完成渲染后触发回调
        // 生成当前头像的url地址的二维码，渲染到弹窗里面
        const dom = this.$refs.myCanvas
        QrCode.toCanvas(dom, url)
      })
    },
    // 获取要导出的数据格式：二维数组
    getExportData (headers, rawData) {
      const result = []
      rawData.forEach(item => {
        // 产生一行数据
        const row = []
        for (const key in headers) {
          // 获取英文的key
          const enKey = headers[key]
          // 根据英文的key获取对应的值
          let attrValue = item[enKey]
          console.log(attrValue)
          if (['timeOfEntry', 'correctionTime'].includes(enKey)) {
            try {
              attrValue = moment(item[enKey]).format('yyyy-MM-DD')
            } catch {
              attrValue = '无效日期'
            }
          } else if (enKey === 'formOfEmployment') {
            // 聘用形式，转换为汉字
            const info = Types.hireType.find(item => item.id === attrValue)
            attrValue = info ? info.value : ''
          }
          // 放入一个列的值
          row.push(attrValue)
        }
        result.push(row)
      })
      return result
    },
    // 导出Excel
    async handleExport () {
      // 导出的数据列表表头
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 获取需要导出的原始数据
      const rawData = await reqGetEmployeeList({
        page: 1,
        size: 50
      })
      // 把原始数据处理成导出的数据格式
      const list = this.getExportData(headers, rawData.data.rows)
      // 导出的表格数据的表头
      // const title = ['姓名', '手机号', '入职日期]
      // Object.keys 是ES6提供的函数用于获取对象的所有的key，最终形成数组
      const title = Object.keys(headers)
      // 需要用到的时候才去加载这个js文件
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: title, // 表头 必填
          data: list, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 基于方法实现聘用形式的格式化
    formatType (row) {
      // row表示整行的数据
      const info = Types.hireType.find(item => item.id === row.formOfEmployment)
      return info ? info.value : ''
    },
    // formatType (value) {
    //   const info = Types.hireType.find(item => item.id === value)
    //   return info ? info.value : ''
    // },
    // 控制页码切换
    changePage (page) {
      this.queryData.page = page
      this.loadEmployeeList()
    },
    // 获取员工列表
    async loadEmployeeList () {
      try {
        const ret = await reqGetEmployeeList(this.queryData)
        if (ret.code === 10000) {
          this.list = ret.data.rows
          this.total = ret.data.total
        }
      } catch {
        this.$message.error('获取员工列表失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
